import * as React from 'react';

import "./boke_write.scss";
import BraftEditor from 'braft-editor';

import { Input,Icon,Button,Checkbox   } from 'antd';
import BokePreview from "src/components/Boke-Preview/Boke-Preview";


const { TextArea } = Input;


class BokeWrite extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            // 创建一个空的editorState作为初始值
            editorState: BraftEditor.createEditorState(null),
            form:{
                content:"<p>hello world!</p>",
                summary:"",
                title:"未命名的文档"
            },
            isPreview:true
        }
    }
    public componentDidMount() {
        // 假设此处从服务端获取html格式的编辑器内容
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        this.setState({
            editorState: BraftEditor.createEditorState(this.state.form.content)
        })
    }
    public handleEditorChange = (editorState: any) => {
        const form = Object.assign({},this.state.form,{content:editorState.toHTML()})
        this.setState({ 
            editorState,
            form
         });
    }
    public submitContent = () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        console.log(htmlContent);
    }
    public changeForm = (k:string,e:Event)=>{
        const target:HTMLInputElement = e.target as HTMLInputElement;
        const form = Object.assign({},this.state.form,{[k]:target.value.trim()})
        this.setState({
            form
        })
    }
    public preview = (value: any):void=>{
        this.setState({
          isPreview:!this.state.isPreview
        })
      }
    public render() {
        const { editorState,form } = this.state;
        const plainOptions = [
            { label: 'Apple', value: 'Apple' },
            { label: 'Pear', value: 'Pear' },
            { label: 'Orange', value: 'Orange' },
          ];
        return (
            <div className="_boke_write onscroll">
                <div className="code-editor">
                    <div className="code-wrap">
                        <div   className={this.state.form.title?'title':'title has-error'}>
                            <Input placeholder="请输入标题"  maxLength={50}  value={form.title} onInput={this.changeForm.bind(this,'title')}  />
                            <Button type="primary">发布</Button>
                            <Button type="primary">保存</Button>
                        </div>
                        <div className="write-w" suppressContentEditableWarning={true}>
                            <BraftEditor
                                value={editorState}
                                onChange={this.handleEditorChange}
                                onSave={this.submitContent}
                            />
                        </div>
                        <div className="summary sort">
                            <h3>摘要 </h3>
                            <TextArea placeholder="请输入摘要" maxLength={200} value={form.summary} onInput={this.changeForm.bind(this,'summary')} />
                        </div>
                        <div className="sort">
                            <h3 className="">文章类型</h3>
                            <div>
                                <Checkbox.Group options={plainOptions} defaultValue={['Apple']} /> 
                            </div>
                        </div>
                        <div className="sort">
                            <h3 className="">个人分类</h3>
                            <div>
                                <Checkbox.Group options={plainOptions} defaultValue={['Apple']} />
                            </div>
                        </div>
                        <div className="sort">
                            <h3 className="">高级选项</h3>
                            <div className="block">
                                <Checkbox.Group options={plainOptions} defaultValue={['Apple']} />
                            </div>
                            <div>
                                <Checkbox >密码访问</Checkbox>
                                <Input placeholder="请输入密码"  maxLength={6} minLength={6}  />
                            </div>
                        </div>
                        <div className="sort">
                            <h3 className="">技术分类</h3>
                            <div>
                                <Checkbox.Group options={plainOptions} defaultValue={['Apple']} />
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
                <ul className="utils">
                    <li title={this.state.isPreview? '收起预览':'预览'} onClick={this.preview}>
                        {this.state.isPreview? <Icon type="double-right" />:<Icon type="double-left" />}
                    </li>
                    <li title="保存">
                        <Icon type="book"  />
                    </li>
                </ul>
                {
                    this.state.isPreview&&(
                        <div className="code-preview">
                            <BokePreview form={this.state.form} />
                        </div>
                    )
                }
            </div>
        );
    }
}

export default BokeWrite;
